Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update misc docs + copy #26

Merged
merged 3 commits into from
Jul 19, 2016
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,18 @@ npm install -g create-react-app

**You’ll need to have Node >= 4 on your machine**. We recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage. You can use [n](https://github.com/creationix/nvm#usage) to easily switch the Node versions between different projects.

**This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. The output folder includes an `index.html` and a minified `.js` bundle so you can host them anywhere you like.
**This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. The output folder includes an `index.html`, a minified `.js` bundle, and bundled images and css, so you can host them anywhere you like.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be fair, we don’t really provide CSS files, they are embedded in JS. Maybe that’s an implementation detail. (Or maybe we should extract them.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly I don't actually understand what the webpack black magic is doing here. ;-) To my noobish mind, it's "sticking the css into the bundle". I'm happy to go with any alternate wording, as long as we do mention that this bundling does something with css, or we can just leave it as "implementation detail".


## Why Use This?

**If you’re getting started** with React, use this tool to automate the build of your app. You can get an app running with React, JSX, and ES6 in minutes. You don’t have to learn the configuration format of Babel, Webpack, and ESLint, or manage their versions. There is no configuration file, and this tool is the only build dependency in your `package.json`.
**If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app:

* React, JSX, and ES6 support
* Language extras beyond ES6 like the object spread operator
* A dev server that lints for common errors
* Import css and image files directly from JavaScript
* Autoprefixed CSS, so you don't need `-webkit` prefixes
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s say “-webkit or other prefixes” or it may sound like we only care about webkit

* A `build` script to bundle js, css, and images for production, with sourcemaps

**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.

Expand Down Expand Up @@ -84,7 +91,7 @@ Currently it is a thin layer on top of many amazing community projects, such as:

All of them are transient dependencies of the provided npm package.

## Contibuting
## Contributing

Clone the repo and run `npm install` in the root and the `global-cli` folder.

Expand Down
9 changes: 4 additions & 5 deletions global-cli/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ var argv = require('minimist')(process.argv.slice(2));
var commands = argv._;
if (commands.length === 0) {
console.error(
'Usage: create-react-app <project-name> [--verbose]'
'Usage: create-react-app <project-directory> [--verbose]'
);
process.exit(1);
}
Expand All @@ -69,7 +69,7 @@ createApp(commands[0], argv.verbose, argv['scripts-version']);

function createApp(name, verbose, version) {
if (fs.existsSync(name)) {
console.log('Directory `' + name + '` already exists. Aborting.');
console.log('The directory `' + name + '` already exists. Aborting.');
process.exit(1);
}

Expand All @@ -91,9 +91,8 @@ function createApp(name, verbose, version) {
fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson));
process.chdir(root);

console.log('Installing react-scripts package from npm...');
console.log('This might take a while! ⌛');
console.log();
console.log('Installing packages. This might take a couple minutes. ⌛');
console.log('Installing react-scripts from npm...');

run(root, appName, version, verbose);
}
Expand Down
13 changes: 11 additions & 2 deletions scripts/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ module.exports = function(hostPath, appName, verbose) {
copySync(path.join(selfPath, 'index.html'), path.join(hostPath, 'index.html'));

// Run another npm install for react and react-dom
console.log('Installing react and react-dom from npm...');
// TODO: having to do two npm installs is bad, can we avoid it?
var args = [
'install',
Expand All @@ -61,15 +62,23 @@ module.exports = function(hostPath, appName, verbose) {
return;
}

// Make sure to display the right way to cd
var cdpath;
if (path.join(process.cwd(), appName) == hostPath) {
cdpath = appName;
} else {
cdpath = hostPath;
}

console.log('Success! Created ' + appName + ' at ' + hostPath + '.');
console.log();
console.log('Inside that directory, you can run several commands:');
console.log(' * npm start: Starts the development server.');
console.log(' * npm run build: Builds the app for production.');
console.log(' * npm run build: Bundles the app into static files for production.');
console.log(' * npm run eject: Removes this tool. If you do this, you can’t go back!');
console.log();
console.log('We suggest that you begin by typing:');
console.log(' cd', appName);
console.log(' cd', cdpath);
console.log(' npm start');
console.log();
console.log('Happy hacking!');
Expand Down
2 changes: 1 addition & 1 deletion scripts/start.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ new WebpackDevServer(webpack(config), {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
console.log('Running development server at http://localhost:3000/');

opn('http://localhost:3000/');
});