Skip to main content

Installing ReactJS/Getting Started with ReactJS


Getting Started

First, we're gonna be needing Node.js to handle the install of our packages. If you don't have Node.js installed, you can use this link to download Node.js.

Creating our App Folder

Next, create root folder for our ReactJS app. In your Desktop, create a new folder and name it as reactApp.

Open command prompt and navigate to your root folder.

root folder cmd

Type the following to create package.json file in our folder.

npm init

Installing the Dependencies for ReactJS

Next, we're gonna install babel plugins, webpack and react itself.

Open command prompt, navigate to our reactApp folder and type the ff:

npm install -g babel
npm install -g babel-cli

npm install webpack --save
npm install webpack-dev-server --save

npm install react --save
npm install react-dom --save

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

Creating our Files

In our root folder, reactApp, create the ff files:

webpack.config.js

  1. var config = {
  2. entry: './main.js',
  3. output: {
  4. path:'/',
  5. filename: 'index.js',
  6. },
  7. devServer: {
  8. inline: true,
  9. port: 8080
  10. },
  11. module: {
  12. loaders: [
  13. {
  14. test: /\.jsx?$/,
  15. exclude: /node_modules/,
  16. loader: 'babel-loader',
  17. query: {
  18. presets: ['es2015', 'react']
  19. }
  20. }
  21. ]
  22. }
  23. }
  24. module.exports = config;

index.html

  1. <!DOCTYPE html>
  2. <html lang = "en">
  3.  
  4. <head>
  5. <meta charset = "UTF-8">
  6. <title>React App</title>
  7. </head>
  8.  
  9. <body>
  10. <div id = "app"></div>
  11. <script src = "index.js"></script>
  12. </body>
  13.  
  14. </html>

App.jsx

  1. import React from 'react';
  2.  
  3. class App extends React.Component {
  4. render() {
  5. return (
  6. <div>
  7. Hello World!!!
  8. </div>
  9. );
  10. }
  11. }
  12. export default App;

main.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import App from './App.jsx';
  4.  
  5. ReactDOM.render(<App />, document.getElementById('app'));

Preparing our Server

1. Open package.json and removing the ff lines inside "scripts" object.

"test" "echo \"Error: no test specified\" && exit 1"

2. Replace the removed line with the ff:

"start": "webpack-dev-server --hot"

3. Install webpack-dev-server by opening command prompt, navigating to our reactApp folder and typing the ff:

npm install webpack-dev-server -g

Running our Server

Lastly, we run our server by opening command prompt, navigate to our reactApp folder and type:

npm start

It will then give you where the project is running which is usually at http://localhost:8080/.

react server

That ends this tutorial. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.