dd010b34e2
Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement).
3.1 KiB
id, title, next, redirect_from
| id | title | next | redirect_from |
|---|---|---|---|
| getting-started | Getting Started | tutorial.html | docs/index.html |
JSFiddle
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
Starter Kit
Download the starter kit to get started.
In the root directory of the starter kit, create a helloworld.html with the following contents.
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use <script type="text/jsx"> and include JSXTransformer.js to actually perform the transformation in the browser.
Separate File
Your React JSX code can live in a separate file. Create the following src/helloworld.js.
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Then reference it from helloworld.html:
<script type="text/jsx" src="src/helloworld.js"></script>
Offline Transform
First install the command-line tools (requires npm):
npm install -g react-tools
Then, translate your src/helloworld.js file to plain JavaScript:
jsx --watch src/ build/
The file build/helloworld.js is autogenerated whenever you make a change.
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
Update your HTML file as below:
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- No need for JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
Want CommonJS?
If you want to use React with browserify, webpack, or another CommonJS-compatible module system, just use the react npm package. In addition, the jsx build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
Next Steps
Check out the tutorial and the other examples in the starter kit's examples directory to learn more.
We also have a wiki where the community contributes with workflows, UI-components, routing, data management etc.
Good luck, and welcome!