This blog shows how to setup a React application.
- with express
- with react router
- with/without react-scripts
- OS with bash-like terminal
nodejs is installed (by that you can call
npm -versionin your bash)
Setup React Project
Create React App is the official way how to create React applications. It comprises all common used features and is updated on a regular basis. To create a project called react-app : Run in the parent directory the commands:
which creates all content in a new created sub directory called react-app and starts a test server. A glance into the generated package.json:
reveals that react-scripts is used to do the magic. Cf. the section Without react-scripts below if you do not want to use it. React applications are single page applications. That means that you have one and only one HTML page, in our case react-app/public/index.html:
A bundler used in the background will bundle all React files that we write into one huge /static/js/bundle.js, which will be added to the above index.html by adding the HTML tag
Run in react-app folder
This creates a build directory which holds the generated index.html, bundle.js etc. that we can put e.g. on an express server.
Even though react-scripts provides a way to test our React application, you will not use this approach in production. We assume that our back-end will be a nodejs server that should provide the index.html with its assests.
Run in react-app folder
express has been added as dependency to the project.
In the react-app folder parallel to src folder create file app.js:
To test the server run
Open in browser
http://localhost:4711/ you should see the page again.
Write React code
There is an index.js in the src:
This index.js contains the root code that uses react-dom to render the content of our root App component inside the
<div id="root"></div> of the index.html.
Let’s modify the App that it uses another component to which we pass a property to see how this works.
In src create a HelloWorldText.js:
Replace src/App.js by:
You may replace Martin by your name.
Run in react-app folder:
and open then http://localhost:4711 in your browser to test the result.
From now on, you can develop with React. Follow the tutorial to learn more about React.
In the single page application the express router provides one and only one HTML page. Normally, you have different websites that are reachable via different URIs. The React Router is a library that attaches URIs to a corresponding React component. Hence, if the user enters an URI the React Router/React renders the according component. So we need just to write one component per page and to inform the router which URI should be matched to which component.
In src create a Hello.js:
In src create a GoodBye.js:
Adapt in src the App.js to use the router:
Let’s define the extremly primitive NavigationBar component that we have used in the above App.js. Create src/NavigationBar.js:
In react-app folder add React Router as dependency to the application:
Let’s run the example in the react-app folder:
http://localhost:4711/goodbye in the browser displays something like:
If you enter the path
/hello the hello page is displayed. If you enter any path other than
/goodbye just the navigation bar is displayed.
The files of the above example:
You find the complete source code here.
While this blog post might not be updated
npx create-react-app will provide you the latest official way how to setup a React application. If you need more control how to steer your project and you do not want to use react-scripts, you can remove react-scripts from an existing project that has been created by
npx create-react-app by running the command:
You cannot undo that step!. It creates all the dev dependencies and adapts the environment that you can do the same things like before, but without react-scripts.
If you like to start from scratch without react-scripts, you will need:
Here the steps, how to achieve that:
which creates a package.json next to the src folder. Within this package.json inside the scripts object and above test we add the following line:
Resulting in the following package.json:
Webpack assumes per default the sources to be in src and that it should place the bundle into dist. Run in react-app folder:
Create .babelrc in react-app folder:
Create webpack.config.js in react-app folder:
It is standard that a website has an icon. Webpack adds
<link rel="shortcut icon" href="favicon.ico"> to our index.html. If you do not have one, you may export any image as ico using gimp or take this one.
Place favicon.ico next to the index.html that you create also in the src folder:
In src create a App.js that we can test the setup:
as well as an index.js in src:
In react-app folder:
You find the bundle called main.js and index.html in dist. Follow the instructions above in the blog post, how to setup express and how to write the React source code, where you replace, of course, build by dist in the app.js.
You find the complete source code of this approach here.