I started to look into ReactJS. It seems that Facebook just released version 15.0.1. I looked into this framework last year, during 0.12.x version, when it was using JSXTransformer, and now it seems it went away from it.
Now it seems that almost every tutorial suggests using latest React with Webpack. Is there a way not use webpack at all? I'm trying to find a good valid example with a grunt task for React 15.x.x.
Any help would be appreciated.
The simplest way:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component{
render() {
return <p>Hello {this.props.name}</p>;
};
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
</html>
Jsx transformer is deprecated it seems.
Update 04/08/2019 : use https://github.com/developit/htm for a minimalist react setup.
If you don't want to use webpack, you have to think about which features you can live without.
With the advancement of browsers' support for ES6 features, you can now have ES6 syntax and also use modules (when activating experimental flags) without using Webpack.
If you want to use JSX, you will always need to transpile it to JS because there is no native support for it in browsers on the horizon. The most simple way of doing that is to add a Babel middleware with the "React" preset, to your development server.
Dependency management is also going to be complicated, because npm provides packages in CommonJS, which can't run as is in the browser...
If you want to experiment with that, you can check out an experimental React starter-kit that I've put on GitHub React Without Webpack that attempts to replicate most of webpack features using native browser features and http2.
The easiest way not to use webpack is to just use babel.
At the moment the most minimal set-up I can figure out is to use the babel-cli and babel-preset-react packages.
If you have a package.json file set up you just need to type:
npm install babel-cli babel-preset-env --save-dev
Then you need a .babelrc file with at least the following content: {"presets": ["react"]}.
If for example your javascript sources are in a js folder, you can compile them to a lib folder by adding a scripts field to your package.json like this:
"scripts": {
"build": "babel js --out-dir lib"
},
So running npm run build compiles your javascript files to a lib folder.
Then you just need to link the compiled file in your html, like this:
<script src="lib/script.js"></script>
A minimal code to use react would be:
const HelloWorld = function HelloWorld(props, context) {
return <p>Hello <strong>React</strong>!</p>;
};
ReactDOM.render(
<HelloWorld />,
document.getElementById('root'),
);
Notice that with this approach you are not transpiling es6 to es5, so if you want to support older browsers you still need to add the babel-preset-env package, and to modify the .babelrc file like this
{
"presets": ["env", "react"]
}
You just have to include the standalone version of babel, like it is explained in the docs: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx
Quickly Try JSX
The quickest way to try JSX in your project is to add this tag to your page:
Now you can use JSX in any tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.
This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically.
Here's an example:
index.html
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props) {
const [name, setName] = React.useState(props.name);
return (
<h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
Hello {name}
</h1>
);
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
You don't need Webpack or grunt, instead of JSXTransformer you need to use Babel https://reactjs.org/docs/getting-started.html#offline-transform
You have to install react and reactDom and babel from CDN and if you need another library like axios you have to import it with script tag
the code below fetch a data and shows with h1 tag
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script type="text/babel">
function ShowPost(props) {
const [post, setPost] = React.useState("");
React.useEffect(()=>{
const fetchData= async ()=>{
const data = await axios.get(
`https://jsonplaceholder.typicode.com/posts/${props.postId}`
);
setPost(data.data.body);
}
fetchData()
},[])
return <h1>{post}</h1>;
}
ReactDOM.render(<ShowPost postId={1} />, document.getElementById("root"));
</script>
</body>
</html>
