Menu
I'm trying to learn ReactJS and I'm finding a lot of tutorials confusing because they layer NodeJS, Babel, and Webpack into their explanations all at once and gloss over a lot of what's going on. I'm trying to do a basic Hello World app and add these tools one at a time so I can understand what is doing what better.
I start with a basic static HTML and JS file:
index.html:
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js (not using JSX yet):
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('app')
);
Okay so this works as expected. Now I want to set up a NodeJS project that serves this exact content so I start with:
npm init -y
And that gives me a package.json. How do I configure NodeJS to serve this basic Hello World code at say localhost:8080? My next step would be to add Babel so I can use JSX, but I don't want to skip to that step until I understand the server setup better.
851
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of: A package manager, such as Yarn or npm.
You don't need webpack. You don't even need JSX, you can just write React. createElement if you want. If you want JSX you need Babel, which will work fine with grunt.
If you just want to get started on React real quick and you don't mind using require or import in your code, then babel could be enough to jump start your React project. Say for example that all your javascript files are in the ./src folder, you can bundle them into one file with this command.
Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”.
ReactJS is a UI framework. To learn ReactJS, you don't need nodejs, npm or any other fancy tools. Just a library script file you can insert the library on a simple index.html and start writing javascript. Note because you are writing on web you need two scripts (exactly like you had).
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
Here is an example 1 with just pure javascript & React:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script>
function Hello(props) {
return React.createElement('h1', null, `Hello ${props.text}`);
}
ReactDOM.render(
React.createElement(Hello, {text: 'World'}, null),
document.getElementById('root')
);
</script>
</body>
</html>
If you notice closely, everything in example 1 script is in JavaScript, there isn't html inside the script, just pure javascript in my script. React & ReactDom gets inserted into my window so I can access it globally. Great this will work, I can keep doing this doing this but React introduced a way to insert html into javascript (JSX) so we can write less javascript (we r all lazy developers). So how can we write JSX because browsers doesn't understand JSX and they only understand javascript?
Well we will use a tool called standalone library (babel standalone). It will transpile (converts all the code you wrote into browser readable javascript) all the code you wrote in JSX and javascript into a normal javascript file. Before this process starts, you need to let the standalone library know which javascript files you want to transpile so you attach type="text/babel" like this <script type="text/babel">....</script>. Once you dom loaded, standalone library will transpile the scripts you told it to transpile and inserts pure javascript into your dom then your javascript will run.
Yes I said that... 1.First your code will transpile 2. then it loaded into the dom 3. Then my javascript runs. This is exactly why we should never use it in production because of the huge delay that happens before your javascript starts running with reactjs. That is where modern tools will help.
Here is example 2 with JSX & React on browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Hello(props) {
return <h1>Hello {props.text}</h1>;
}
ReactDOM.render(
<Hello text="World" />,
document.getElementById('root')
);
</script>
</body>
</html>
Great now that we inserted, JSX, what if I want to use latest ES6 and beyond features? Browsers don't support them yet. The standalone library comes to rescue again. The library gives you ability to add plugins to compile latest javascript or jsx or others into javascript.
Here is example 3 with ES6 and JSX on browser with a plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.text}</h1>;
}
}
ReactDOM.render(
<Hello text="World" />,
document.getElementById('root')
);
</script>
</body>
</html>
All these tools like babel, webpack, help make your app ready for production but for learning it is much easier first to understand react without extra tools then slowly start expanding.
** Note: All the examples are for learning purposes and prototyping and not for production use, if you read my entire answer you will know why.
174
The simplest way would be using a lib like node-static (npm install node-static --save-dev) and adding it as the start script in your package.json
"scripts": {
"start": "static ./"
},
Start it with the npm start command.
Though this will work, if you plan to add babel I highly recommend you to jump into webpack (or any other build tool, I personally think webpack is the best option) because webpack already have a development server that will serve static files during development for you ( witch a lot of goodies like hot reload ) and webpack is not that hard to learn, the official documentation is somewhat difficult for beginners, I recommend you to read this how-to first.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
