Installing ReactJS/Getting Started with ReactJS

Submitted by: 
Language: 
Visitors have accessed this post 337 times.

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 :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.