Sample codes within 40 lines for students learning React for the first time [How to create form]

mimi

I’m a React learner.
Writing one code a day.

Generally, many professional programmers say “If you want to program, just write it!”.
At least Japanese programmers tell beginners like that.

I’m aiming to use this blog to “boosting my knowledge by outputting what I learned.”

This time, I tried programming to make a form by React.

Here is the sample code  that “one small completed application will be created within 40 lines”.

Creating React compilation environment

If you add the text for loading JavaScript library of React (and JSX) to header and load the library,  it takes long time to be compiled.

Also it takes longer time until the page will be displayed.

Therefore, in the usage of React / JSX, using precompilation environment is common to compile the React / JSX code.

The application to create “precompile environment” is “create-react-app“.

Create a precompilation environment

1.  Install “create-react-app”.

$ npm install -g create-react-app

 “-g” (option for installation in global environment) is added, so any directories can be used for the installation.

2. Create a project by “create-react-app”.

In this case, I named the project “form_practice“

$ create-react-app form_practice

All of files for the application are generated in the “form_practice” folder like following.

*Note: Creating the project might take a little long time (about one minute). Please just wait until it’s done.

Soon after finishing this step, a basic application has been created.

3. Run the application.

$ npm run build

“build” folder will be created in the “form_practice” folder.

4. Go to “build” folder and install a server and run it.

$ cd build
$ npm install -g http-server
$ hs

The address of the server will be provided.

5. Access to the provided server address in your web browser.

Even no file editing soon after installation, your basic application creation has been done. So that you can see your default React application in your browser.

After you find your basic application will be shown, you can edit each file to create your own application.

A sample code for React learning “just show your form application”

How the sample works: Input something in the form and click “Send” button, you will see the value that you input in alert() dialog.

ここでは、入力できるのは数字のみとし、数字以外は入力できないようにしているものです。

The sample code equips a restriction allowing input numbers but no other characters.

1.  Create “form_practice” folder.

Follow step 2 in the previous chapter (creating compilation environment) to create “form_practice” folder. Then proceed the operation following with next steps below.

$ create-react-app form_practice

２. Move to “form_practice” folder and start running your application.

$ cd form_practice
$ npm start

3. Create “NumberForm.js” in “src” folder.

Here is the code for “NumberForm.js”

4.　Rewrite “index.js”  in “src” folder.

Here is the code for “index.js” .

Run your showing form application

Follow the step “3. Run the application” in previous chapter, you will see a simple form shown in  web browser.

Input your favorite numbers in the form.

Click “Send（送信）”.

The number that you input “00” in previous step will be displayed in alert() dialog.

And you can check only numbers will be accepted in the form.

Summary

React does not need to create the files one by one and put them in one application.

The concept of the React is “React gives you one set of default application by create-react-app. Any user can edit the files in the application to make it another application.”